<template>
    <div class="knowofpet">
        <div class="header">
            <h1 id="know">养宠小知识</h1>
            <div id="search">
                <input class="user-input" type="text" name="search" placeholder="请输入内容" v-model="input" @change="search">
                <input class="user-btn" type="button" value="搜索">
            </div>
        </div>
        <div class="float-button">
            <a href="javascript:window.scrollTo(0,0)">UP</a>
        </div>
        <div class="content">

            <div class="know1">
                <div class="picbox">
                    <div id="img1">
                        <img src="../assets/images/1/know7.jpg">
                    </div>
                    <div id="img2">
                        <img src="../assets/images/1/know8.jpg">
                    </div>
                </div>
                <div class="content1">
                    <div class="front">
                        <h1 class="p1">宠物训练</h1>
                        <p class="p2">我们除了对宠物进行照顾外，
                            还要适当的给宠物加以训练，这样能够给我们带来不必要的的麻烦。
                            比如：一般宠物都会比较淘气，没事的时候，很容易在家里捣乱，
                            乱咬东西或者乱拉粑粑或者乱吃其它东西等等。因此我们必须给予正确的训练，
                            让它自己去指定的位置拉粑粑，不能乱咬东西，捣乱。
                        </p>
                    </div>
                    <div class="back">
                        <router-link class="link" to="/know">know more about</router-link>
                        
                    </div>
                </div>
            </div>
            <div class="know1">
                <div class="content1">
                    <div class="front">
                        <h1 class="p1">宠物健康</h1>
                        <p class="p2">在我们养宠物的时候，需要仔细关注宠物的动态，
                            这样对它的健康是非常重要的。比如：通过观察宠物的饮食情况、
                            排泄情况（次数和异物）、日常活动行为、宠物毛色和宠物体温等等，
                            确保动物是否生病，如果你无法判断是否真的生病，最好的办法，
                            就是及时带到兽医处检查。

                        </p>
                    </div>
                    <div class="back">
                        <router-link class="link" to="/know">know more about</router-link>
                    </div>
                </div>
                <div class="picbox">
                    <div id="img1">
                        <img src="../assets/images/1/know5.jpg">
                    </div>
                    <div id="img2">
                        <img src="../assets/images/1/know6.jpg">
                    </div>
                </div>

            </div>
            <div class="know1">
                <div class="picbox">
                    <div id="img1">
                        <img src="../assets/images/1/know1.jpg">
                    </div>
                    <div id="img2">
                        <img src="../assets/images/1/know2.jpg">
                    </div>
                </div>
                <div class="content1">
                    <div class="front">
                        <h1 class="p1">宠物照顾</h1>
                        <p class="p2">说起宠物的照顾，当然是要给宠物一个安心舒适的睡觉环境，
                            避免受环境影响，进而影响睡眠和健康。定时给宠物修剪毛发和指甲，
                            定时给洗澡，带宠物散步。要做好宠物的卫生清洁，所以你一定要勤快，
                            不要怕脏。这样宠物才会健康成长，不会滋生细菌和皮肤病等等。
                        </p>
                    </div>
                    <div class="back">
                        <router-link class="link" to="/know">know more about</router-link>
                    </div>
                </div>
            </div>
            <div class="know1">
                <div class="content1">
                    <div class="front">
                        <h1 class="p1">宠物饮食</h1>
                        <p class="p2">无论你养什么宠物，你首先必须要了解宠物的饮食习惯，
                            以及能吃什么，不能吃什么。不能随着自己性子，随便给它吃，随意养，这样宠物很可能被你养坏。
                            所以必须先了解好宠物的生活习惯，依据科学的方式，通过多了解，多学习。有很多宠物都是受环境影响的，
                            另外还要注意喂养时间，喂养食物是否均衡。
                        </p>
                    </div>
                    <div class="back">
                       <router-link to="/know" class="link" >know more about</router-link>
                    </div>
                </div>
                <div class="picbox">
                    <div id="img1">
                        <img src="../assets/images/1/know3.jpg">
                    </div>
                    <div id="img2">
                        <img src="../assets/images/1/know4.jpg">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
   import axios from "axios"
    export default {
            
        // data(){
        //     return{
        //     kid:[],
        //     know:[],
        //     title:[]
        //     }
        // },
        // method() {
        //     axios.get("http://localhost:3000/api/knowofpet")
        //     .then(res=>{
        //         this.know=res.data();
        //         console.log(this.know);
        //     })
        // }
        data() {
            return {
                input: '',
                index: 0,
                info: []
            }
        },
        mounted() {
            var _this = this;
            axios.get("http://localhost:3000/api/knowofpet")
                .then(res => {
                    console.log("获取数据成功");
                    console.log(res);
                    _this.info = res.data;
                    console.log(_this.info)

                })
                .catch(err => {
                    console.log('获取数据失败' + err);
                })

        },
        methods: {
            search() {
                let _this = this;
                if (_this.input == '') {
                    console.log('搜索空字符');
                    _this.$router.go(0);
                }
                else {

                    console.log('搜索' + _this.input);
                    let a = _this.info.filter(v => {
                        return JSON.stringify(v.knowtitle).indexOf(_this.input) !== -1;
                    });
                    _this.$router.push('/Know');
                    console.log(a);
                    _this.info = a;
                }
            }

        }
    }
</script>

<style scoped>
    .knowofpet{
        min-width: 100%;
        display: flex;
    /* height: 2000px; */
    /* width: 100%; */
    /* border: solid black 3px; */
    flex-direction: column;
    }
    a {
        text-decoration: none;
    }

    a:hover {
        text-decoration: none;
    }

    .user-input {
        width: 90%;
        height: 100%;
        border: 2px solid rgba(246, 255, 0, 0.86);
        border-radius: 5px;
        box-sizing: border-box;
        outline: none;
        text-indent: 10%;
        font-size: 150%;
        font-family: 楷体;
    }

    .user-btn {
        width: 60%;
        height: 90%;
        border: none;
        border-radius: 5px;
        background: rgba(251, 255, 0, 0.874);
        vertical-align: middle;
        outline: none;
        color: white;
        font-size:160%;
        font-family: 楷体;
    }

    #search {
        display: flex;
        float: right;
        margin-top: 1%;
    }

    #know {
        
        display: flex;
        float: left;
       margin-top: 1%;
       margin-left: 3%;
        font-family: 楷体;
        color: rgba(0, 119, 255, 0.492);
    }

    .float-button {
        position: fixed;
        /* height: 10%; */
        width: 5%;
        bottom: 0px;
        right: 0px;
        border-radius: 50px;
        line-height: 450%;
        text-align: center;
        background: #f7f31045;
        z-index: 1;
    }

    .content {
        display: flex;
        /* height: 2000px; */
        width: 100%;
        /* border: solid black 3px; */
        flex-direction: column;
        margin-bottom: 5%;
    }
   
    .know1 {
        display: flex;
        height: 400px;
        /* width: 100%; */
        border: dashed rgba(240, 255, 255, 0.858) 3px;
        justify-content: center;
        align-items: center;
        margin-top: 3%;
        border-radius: 50px;
        margin-left: 3%;
        margin-right: 3%;
        background-color: rgba(240, 255, 255, 0.858);
    } 
    .know1:hover {
    box-shadow: 0px 0px 20px #888888;
  }
 
    .picbox {
        display: flex;
        /*position: relative;*/
        height: 400px;
        width: 500px;
        /*3d——双面效果*/
        transform-style: preserve-3d;
        /* 完成过渡时间 */
        transition: 1.5s;
    }

    .picbox:hover {
        transform: rotateY(180deg);

    }

    #img1 {
        display: flex;
        position: absolute;
        height: 400px;
        width: 460px;
        /* border: solid black 3px; */
        border-radius: 50%;
        overflow: hidden;
        backface-visibility: hidden;
    }

    #img2 {
        display: flex;
        position: absolute;
        height: 400px;
        width: 460px;
        border: solid rgb(19, 189, 236) 3px;
        border-radius: 50%;
        overflow: hidden;
        backface-visibility: hidden;
        transform: rotateY(180deg);

    }

    #img1 img {
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #img2 img {
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .content1 {
        display: flex;
        height: 350px;
        width: 500px;
        border: dashed rgba(240, 255, 255, 0.858) 3px;
        transform-style: preserve-3d;
        transition: 1.5s;
        border-radius: 50px;
        background-color: #fff;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 102, 255, 0.097);
        margin-left: 1%;
        margin-right: 1%;
    }

    .content1:hover {
        transform: rotateX(180deg);

    }

    .front {
        display: flex;
        position: absolute;
        height: 300px;
        width: 400px;
        border: dashed rgba(0, 102, 255, 0.097) 3px;
        backface-visibility: hidden;
        border-radius: 50px;
        background-color: #fff;
    }

    .back {
        display: flex;
        position: absolute;
        height: 350px;
        width: 500px;
        border: dashed rgba(240, 255, 255, 0.858) 3px;
        backface-visibility: hidden;
        transform: rotateX(180deg);
        border-radius: 50px;
        background-color: rgba(0, 102, 255, 0.097);
    }


    .p1 {
        margin: 4%;
       
    }

    .p2 {
        margin-top: 8%;
        line-height: 200%;
    }

    .link {
        text-align: center;
        line-height: 800%;
        font-size: 300%;
        font-weight: 100;
        font-family: 楷体;
        margin-left: 10%;
    }

    @media screen and (max-width:768px){
            /* 手机屏幕 */
   .know1{
       zoom:0.8;
   }
   .picbox{
       display: none;
   }
   .back{
       zoom:0.8;

   }
   .float-button{
       zoom:0.8;
       height: 5%;
       line-height: 250%;
   }
    }
   @media screen and (max-width:992px) and (min-width:768px){
            /* 平板 */
    #img1{
        zoom: 0.8;
       margin-top: 30px;
    }
    #img2{
        zoom: 0.8;
        margin-top: 30px;
    }
   .float-button{
       zoom:0.8;
       
   }
    .content1{
        width: 450px;
        zoom: 0.8;
    }
    .back{
        zoom: 0.8;
    }
    }
</style>